<template>
	<view class="container">
		<!-- 年份选择器 -->
		<view class="year-selector">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				class="year-buttons" activeColor="#007AFF">
			</uni-segmented-control>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card">
				<text class="stat-value">{{ yearlyStats.total }}</text>
				<text class="stat-label">年度总用电量(KWH)</text>
			</view>
			<view class="stat-card">
				<text class="stat-value">{{ yearlyStats.average }}</text>
				<text class="stat-label">月平均用电量(KWH)</text>
			</view>
		</view>

		<!-- 图表容器 -->
		<view class="chart-container">
			<view class="chart-title">{{ selectedYear }}年月度用电量趋势</view>
			<uni-chart :option="opt" class="chart" />
		</view>

		<!-- 数据表格 -->
		<view class="table-container">
			<view class="table-title">详细数据</view>
			<uni-table border stripe emptyText="暂无更多数据" class="data-table">
				<!-- 表头行 -->
				<uni-tr class="table-header">
					<uni-th align="center" style="width: 20%;">月份</uni-th>
					<uni-th align="center" style="width: 25%;">用电量(KWH)</uni-th>
					<uni-th align="center" style="width: 20%;">同比</uni-th>
					<uni-th align="center" style="width: 20%;">环比</uni-th>
					<uni-th align="center" style="width: 15%;">趋势</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index" class="table-row">
					<uni-td>{{ item.month }}</uni-td>
					<uni-td class="power-value">{{ item.power }}</uni-td>
					<uni-td :class="getCompareClass(item.yearCompare)">{{ item.yearCompare }}</uni-td>
					<uni-td :class="getCompareClass(item.monthCompare)">{{ item.monthCompare }}</uni-td>
					<uni-td class="trend-cell">
						<text :class="getTrendClass(item.trend)">{{ getTrendIcon(item.trend) }}</text>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				items: ['2025年', '2024年', '2023年'],
				current: 0,
				selectedYear: 2025,
				yearlyStats: {
					total: 0,
					average: 0
				},
				tableData: [],
				opt: {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'rgba(0,122,255,0.1)'
							}
						},
						confine: true,
						backgroundColor: 'rgba(255,255,255,0.95)',
						borderColor: '#E5E5E5',
						borderWidth: 1,
						textStyle: {
							color: '#333'
						}
					},
					legend: {
						bottom: 10,
						left: 'center',
						textStyle: {
							color: '#666',
							fontSize: 12
						}
					},
					grid: {
						left: '5%',
						right: '5%',
						top: '10%',
						bottom: '20%'
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLabel: {
							color: '#666',
							fontSize: 11
						},
						axisLine: {
							lineStyle: {
								color: '#E5E5E5'
							}
						}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#666',
							fontSize: 11,
							formatter: '{value} KWH'
						},
						axisLine: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#F0F0F0',
								type: 'dashed'
							}
						}
					}],
					series: [
						{
							name: '生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#007AFF',
							data: []
						},
						{
							name: '非生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#34C759',
							data: []
						},
						{
							name: '辅助生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#FF9500',
							data: []
						}
					]
				}
			}
		},
		// 接受参数
		onLoad(option) {
			const title = option.name;
			if (title) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				currentPage.$page.meta.navigationBar.titleText = title;
			}
			this.initData();
		},
		methods: {
			// 年份切换事件
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.selectedYear = 2025 - e.currentIndex;
					console.log('切换到年份:', this.selectedYear);
					this.generateData();
				}
			},
			
			// 初始化数据
			initData() {
				this.generateData();
			},
			
			// 生成模拟数据
			generateData() {
				const year = this.selectedYear;
				const monthNames = [];
				const productionData = [];
				const nonProductionData = [];
				const auxiliaryData = [];
				const tableData = [];
				
				// 生成12个月的数据
				for (let month = 1; month <= 12; month++) {
					const monthStr = month.toString().padStart(2, '0');
					monthNames.push(`${year}${monthStr}`);
					
					// 根据年份和月份生成不同的数据
					const baseSeed = year * 100 + month;
					const production = Math.floor(80 + (baseSeed % 100) * 2.5 + Math.random() * 50);
					const nonProduction = Math.floor(150 + (baseSeed % 50) * 3 + Math.random() * 80);
					const auxiliary = Math.floor(100 + (baseSeed % 80) * 2 + Math.random() * 60);
					
					productionData.push(production);
					nonProductionData.push(nonProduction);
					auxiliaryData.push(auxiliary);
					
					// 生成表格数据
					const total = production + nonProduction + auxiliary;
					const yearCompare = this.generateCompareValue();
					const monthCompare = this.generateCompareValue();
					const trend = this.getTrend(yearCompare, monthCompare);
					
					tableData.unshift({
						month: `${year}-${monthStr}`,
						power: total.toLocaleString(),
						yearCompare: yearCompare,
						monthCompare: monthCompare,
						trend: trend
					});
				}
				
				// 更新图表数据
				this.opt.xAxis[0].data = monthNames;
				this.opt.series[0].data = productionData;
				this.opt.series[1].data = nonProductionData;
				this.opt.series[2].data = auxiliaryData;
				
				// 更新表格数据
				this.tableData = tableData;
				
				// 计算年度统计
				const totalYearly = productionData.reduce((a, b) => a + b, 0) + 
									nonProductionData.reduce((a, b) => a + b, 0) + 
									auxiliaryData.reduce((a, b) => a + b, 0);
				this.yearlyStats = {
					total: totalYearly.toLocaleString(),
					average: Math.round(totalYearly / 12).toLocaleString()
				};
			},
			
			// 生成对比数值
			generateCompareValue() {
				const isPositive = Math.random() > 0.4;
				const value = (Math.random() * 20 + 1).toFixed(1);
				return `${isPositive ? '+' : '-'}${value}%`;
			},
			
			// 获取趋势
			getTrend(yearCompare, monthCompare) {
				const yearTrend = yearCompare.startsWith('+') ? 1 : -1;
				const monthTrend = monthCompare.startsWith('+') ? 1 : -1;
				return yearTrend + monthTrend; // -2, -1, 0, 1, 2
			},
			
			// 获取对比样式类
			getCompareClass(value) {
				return value.startsWith('+') ? 'positive' : 'negative';
			},
			
			// 获取趋势样式类
			getTrendClass(trend) {
				if (trend > 0) return 'trend-up';
				if (trend < 0) return 'trend-down';
				return 'trend-flat';
			},
			
			// 获取趋势图标
			getTrendIcon(trend) {
				if (trend > 0) return '↗️';
				if (trend < 0) return '↘️';
				return '➡️';
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 年份选择器 */
	.year-selector {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.year-buttons {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
	}

	/* 数据统计卡片 */
	.stats-cards {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.stat-card {
		flex: 1;
		padding: 30rpx 20rpx;
		background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
		border-radius: 16rpx;
		text-align: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
	}

	.stat-value {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.stat-label {
		display: block;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.4;
	}

	/* 图表容器 */
	.chart-container {
		margin-bottom: 30rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.chart {
		height: 500rpx;
		width: 100%;
	}

	/* 表格容器 */
	.table-container {
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.table-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.data-table {
		border-radius: 12rpx;
		overflow: hidden;
	}

	.table-header {
		background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
	}

	.table-row:nth-child(even) {
		background-color: #f8f9fa;
	}

	.power-value {
		font-weight: 600;
		color: #007AFF;
	}

	.positive {
		color: #34C759;
		font-weight: 600;
	}

	.negative {
		color: #FF3B30;
		font-weight: 600;
	}

	.trend-cell {
		text-align: center;
	}

	.trend-up {
		color: #34C759;
		font-size: 32rpx;
	}

	.trend-down {
		color: #FF3B30;
		font-size: 32rpx;
	}

	.trend-flat {
		color: #8E8E93;
		font-size: 32rpx;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.stats-cards {
			flex-direction: column;
		}
		
		.container {
			padding: 15rpx;
		}
	}
</style>